.home {
  // inherit：inherit属性值定义的元素会继承父元素的visibility属性值
  visibility: inherit;
}

html {
  // 裁剪内容 - 不提供滚动机制。
  overflow-x: hidden;
  // 实现平滑滚动
  scroll-behavior: smooth;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;

  //  @media screen and (min-width: 133.3333vw) {
  body {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: skyblue;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
    max-width: 133.3333vw;

    div {
      margin: 0;
      padding: 0;
    }

    .wrap {

      .section {
        align-items: center;
        display: flex;
        /* flex-direction: column; 灵活的项目将垂直显示，正如一个列一样。 */
        flex-direction: column;
        margin: 0 auto;
        justify-content: center;
        position: relative;
        max-width: 135.4167vw;
        display: flex;
        padding: 4.1667vw 2.0833vw;
        align-items: center;

      }

      // 第一部分报头背景
      @media (min-width: 50vw) {

        .masthead {
          min-height: 41.6667vw;
          overflow: hidden;

          // 背景
          .background-overlay {
            pointer-events: none;
            position: absolute;
            top: 0px;
            left: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;

            video {
              position: absolute;
              width: 100%;
              top: 0;
              left: 0;
              // height: 100%;
              // 定义元素内容适应容器的宽高
              object-fit: inherit;
              display: block;

              video,
              img {
                vertical-align: top !important;
              }

            }

            .masthead-video-mask {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/960_F2P_Masthead_Fallback.jpg) no-repeat 50% 0/cover;
              display: none;
            }



          }

          /* logo 部分 */
          .main-content {
            align-items: center;
            display: flex;
            height: 100%;
            justify-content: center;
            position: relative;
            transform: translateY(30px);

            .top {
              align-items: center;
              display: flex;
              flex-direction: column;
              background-color: transparent;

              .logos {
                max-width: min(100%, 25vw);
                margin: 1.6667vw;

                img {
                  max-width: 100%;
                  border: 0;
                  padding: 0 .8333vw;
                  height: auto;
                }
              }

              .header {
                font-style: italic;
                margin: 0 1.0417vw;

                .heading {
                  font-size: 3.3333vw;
                  line-height: 3.125vw;
                  color: #fff;
                  font-weight: 700;
                  text-align: center;
                  font-style: normal;
                }

                .description {
                  font-size: 1.4583vw;
                  display: flex;
                  // 水平居中
                  justify-content: center;
                  color: #fff;
                  font-weight: 700;
                  margin-top: 1.25vw;
                  font-style: normal;

                  p {
                    line-height: 1.8229vw;
                  }
                }
              }

              .cta {
                margin: 2.0833vw;

                .btn-primary {
                  padding: 0 2.0833vw;
                  font-size: 1.25vw;
                  height: 3.75vw;
                  line-height: 3.75vw;
                  z-index: 1;
                  // display: block;
                  background: #f06414;
                  position: relative;

                  border-radius: 2px;
                  opacity: .9;
                  box-shadow: 0 .1042vw .5208vw 0 rgb(0 0 0 / 10%);
                  color: #fff;
                  font-weight: 700;
                  display: inline-flex;
                  text-align: center;
                  justify-content: center;
                  align-items: center;
                }
              }
            }

          }
        }
      }



      // 第二部分  概述部分
      .overview {
        background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/2600_Silver_Background.jpg) no-repeat 50% 0;
        background-size: cover;
        width: 100%;
        margin-left: auto;
        margin-right: auto;

        .content {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          max-width: 83.3333vw;

          .left {
            width: 40%;

            .heading {
              color: #1d253a;
              font-weight: 700;
              font-size: 3.125vw;
              line-height: 3.4375vw;
              font-style: normal;
            }

            .description {
              font-size: 1.0417vw;
              color: rgba(29, 37, 58, .9);
              margin-top: 1.25vw;
            }
          }

          .right {
            margin-left: 4.1667vw;
            width: 60%;

            .image {
              border-radius: .2083vw;
              overflow: hidden;
              position: relative;
            }

            .image:before {
              content: "";
              position: absolute;
              border: 2px solid hsla(0, 0%, 100%, .2);
              border-radius: 4px;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 1;
              pointer-events: none;
            }
          }
        }

      }



      // 第三部分  赛季部分
      .season {
        background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/2600_Season.jpg) no-repeat 50% 0;
        background-size: cover;
        -webkit-mask-box-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_and_Bottom_Divider-e96feb1c3a.svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        margin-top: -1.875vw;
        margin-bottom: -1.875vw;
        z-index: 1;

        .content {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          max-width: 83.3333vw;

          .left {
            flex: 1;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0%;

            .image {
              border-radius: .2083vw;
              overflow: hidden;
              position: relative;
            }

            .image:before {
              content: "";
              position: absolute;
              border: 2px solid hsla(0, 0%, 100%, .2);
              border-radius: .2083vw;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 1;
              pointer-events: none;
            }
          }

          .right {
            margin-left: 3.125vw;
            width: 31.6667vw;

            .heading {
              color: #fff;
              font-weight: 700;
              font-size: 3.125vw;
              line-height: 3.4375vw;
              text-shadow: 0 .2083vw .5208vw rgb(0 0 0 / 20%);
              font-style: normal;
            }


            .description {
              font-size: 1.0417vw;
              color: #fff;
              text-shadow: 0 .2083vw .5208vw rgb(0 0 0 / 20%);
              margin-top: 1.25vw;
            }

            .btn-wrap {
              justify-content: flex-start;
              margin-top: 2.0833vw;

              a {
                margin-right: 1.25vw;
                display: inline-block;
              }

              .btn-primary {
                padding: 2.0833vw;
                font-size: 1.25vw;
                height: 3.75vw;
                line-height: 3.75vw;

                background: #f06414;
                position: relative;
                z-index: 1;
                border-radius: .1042vw;
                opacity: .9;
                box-shadow: 0 .1042vw .5208vw 0 rgb(0 0 0 / 10%);
                color: #fff;
                font-weight: 700;
                padding: 0 1.0417vw;
                text-align: center;
                justify-content: center;
                align-items: center;
              }

              .btn-default {
                padding: 0 2.0833vw;
                font-size: 1.25vw;
                height: 3.75vw;
                line-height: 3.75vw;
                background: #fff;
                position: relative;
                z-index: 1;
                border-radius: .1042vw;
                opacity: .9;
                box-shadow: 0 .1042vw .5208vw 0 rgb(0 0 0 / 10%);
                color: #000;
                font-weight: 700;
                padding: 0 1.0417vw;
                text-align: center;
                justify-content: center;
                align-items: center;

              }
            }
          }

        }
      }



      // 第四部分  新闻部分
      .news {
        background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/2600_Silver_Background.jpg) no-repeat 50% 0;
        background-size: cover;
        width: 100%;
        margin-left: auto;
        margin-right: auto;

        // 新闻标题
        .heading {
          color: #1d253a;
          font-size: 2.5vw;
          font-style: normal;
          font-weight: 700;
          margin-bottom: 2.0833vw;
        }

        // 内容
        .gallery-wrap {
          width: 100%;

          .gallery-list {
            display: flex;
            max-width: 72.9167vw;
            flex-wrap: wrap;
            justify-content: center;
            margin: 0 auto;

            .gallery-items {
              display: flex;
              background: radial-gradient(124.81% 124.81% at 50% -.29%, #242a42 43.75%, #121524 100%);
              position: relative;
              border-radius: .2083vw;
              overflow: hidden;
              width: calc(25% - 1.6667vw);
              margin: 0 .8333vw 1.6667vw;

              &:hover img {
                box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
                transform: scale(1.1);
              }

              a {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;

                .image-wrapper {
                  position: relative;
                  width: 100%;
                  padding-top: 44%;

                  img {
                    width: 100%;
                    transition: .3s ease;
                    position: absolute;
                    left: 0;
                    top: 0;
                  }
                }

                .gallery-text {
                  display: flex;
                  flex-direction: column;
                  -ms-flex-pack: justify;
                  justify-content: space-between;
                  margin: .7813vw;
                  font-size: 1.0417vw;
                  color: #fff;
                  line-height: 1.4583vw;

                  .heading {
                    overflow: hidden;
                    color: #fff;
                    text-overflow: ellipsis;
                    font-size: .9375vw;
                    height: 3vw;
                  }

                  .gallery-footer {
                    font-size: .7292vw;
                    margin-top: .8333vw;
                    color: #aaa;
                  }
                }

              }

              .gallery-items:before {
                content: "";
                position: absolute;
                border: .1042vw solid hsla(0, 0%, 100%, .2);
                border-radius: .2083vw;
                pointer-events: none;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
              }
            }
          }

        }

        // 查看更多
        .btn-tertiary {
          align-items: center;
          column-gap: .4167vw;

          background: #05a0fa;
          position: relative;
          z-index: 1;
          border-radius: .1042vw;
          opacity: .9;
          box-shadow: 0 .1042vw .5208vw rgb(0 0 0 / 10%);
          color: #fff;
          font-weight: 700;
          display: inline-flex;
          padding: 0 1.6667vw;
          height: 3.75vw;
          line-height: 3.75vw;
          font-size: 1.25vw;
          text-align: center;
          justify-content: center;
          align-items: center;

        }
      }



      // // 第五部分  英雄产品特点部分
      .features-heroes {
        background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/2600_Sky.jpg) no-repeat 50% 17%;
        background-size: cover;
        margin-top: -0.9896vw;
        -webkit-mask-box-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Divider-2d39cd814f.svg);
        mask-border: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Divider-2d39cd814f.svg);
        -webkit-mask-box-image-slice: 20 350 fill;
        mask-border-slice: 20 350 fill;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        text-shadow: 0 .2083vw .5208vw rgb(0 0 0 / 20%);
        overflow: hidden;

        // 头部标题
        .header {
          margin-bottom: 3.125vw;
          display: flex;
          justify-content: center;
          text-align: center;
          color: #fff;
          flex-direction: column;
          align-items: center;

          // 标题
          .subheading {
            margin-bottom: .2083vw;
            font-size: 1.0417vw;
            line-height: 1.1458vw;
            color: rgba(255, 255, 255, .9);
          }

          .heading {
            font-style: normal;
            margin-top: 0;
            font-size: 3.125vw;
            max-width: 41.6667vw;
            font-weight: 700;
            line-height: 1.2;

            .isMobile {
              display: none !important;
            }
          }

          .description {
            margin-top: 1.25vw;
            max-width: 41.6667vw;
            font-size: 1.0417vw;
            color: rgba(255, 255, 255, .9);

            .isMobile-v {
              visibility: visible !important;
            }
          }
        }

        // 游戏亮点廊
        .gallery-wrap {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          max-width: 72.9167vw;

          .gallery-items {
            text-align: center;
            width: calc(25% - 1.6667vw);
            margin: 0 .8333vw;

            .image-wrapper {
              position: relative;
              overflow: hidden;
              border-radius: .2083vw;

              &::before {
                content: "";
                position: absolute;
                border: .1042vw solid hsla(0, 0%, 100%, .2);
                border-radius: .2083vw;
                pointer-events: none;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
              }

              img {
                vertical-align: top;
                width: 100%;
                height: 100%;
              }
            }

            .gallery-text {
              margin: 1.0417vw;

              .heading {
                color: #fff;
                font-size: 1.0417vw;
                line-height: 1.4583vw;
              }

              .description {
                font-size: .8333vw;
                margin-top: .8333vw;
                color: rgba(255, 255, 255, .7);
              }
            }

          }
        }

        // 英雄
        .heroes-wrap {
          max-width: 2600px;
          width: 100%;
          height: 40.3646vw;
          color: #fff;
          background-size: cover;
          margin: 0 auto;
          overflow: hidden;

          .heroes-con {
            position: relative;
            display: flex;
            flex-direction: column;
            max-width: 1400px;
            width: 100%;
            height: 39.0625vw;
            margin-top: 5.4167vw;
            margin-right: auto;
            margin-left: auto;
          }

          /* 右 */
          .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 31.25vw;
            height: 39.0625vw;
          }

          .heading {
            font-size: 3.125vw;
            color: #ffff;
            margin: 0 0 1.5625vw;
          }

          .tab {
            margin: 0 -2.8646vw 2.0833vw;
          }

          .tab ul {
            display: flex;
            box-sizing: border-box;
            position: relative;
            margin-left: 1.9792vw;
          }

          .tab li.tab-active {
            opacity: 1;
            background-color: rgba(255, 255, 255, .3);
            border-radius: 50%;
          }

          .tab li {
            margin: .4167vw .8333vw !important;
            width: 2.6042vw;
            height: 2.6042vw;
            padding: .7292vw;
            position: relative;
            opacity: .5;
            background: none;
            text-align: center;
            overflow: hidden;
          }

          .tab li:before {
            content: "";
            position: absolute;
            border: 2px solid hsla(0, 0%, 100%, 1);
            border-radius: 50%;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
          }

          li img {
            width: 100%;
            height: 100%;
            border: 0 none;
            max-width: 100%;
            margin: auto;
            vertical-align: middle;
          }

          .con {
            width: 29.6875vw;
            position: relative;
            /* margin-left: 80px; */
          }

          .con h3 {
            font-style: normal;
            font-size: 1.875vw;
          }

          .description {
            margin-top: .8333vw;
            font-size: 1.0417vw;
            margin-bottom: 2.6042vw;
          }

          .btn-default {
            padding: 0 40px;
            font-size: 1.25vw;
            height: 3.75vw;
            line-height: 3.75vw;
            background: #fff;
            position: relative;
            z-index: 1;
            border-radius: 2px;
            opacity: .9;
            box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
            color: #000;
            font-weight: 700;
            display: inline-flex;
            line-height: 3.3333vw;
            text-align: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
          }

          /* 左 */
          .left {
            width: 39.0625vw;
            // height: 1106px;
            position: absolute;
            top: 0;
            left: 0;
          }

          .left img {
            width: 39.0625vw;
            position: absolute;
            top: 230px;
            right: auto;
            margin-top: -250px;
            transform: translate(-2000px);
            opacity: 0;
            transition: transform .5s ease-out, opacity .25s linear, -webkit-transform .5s ease-out;
          }

          .left img.pic-active {
            transform: translate(0);
            opacity: 1;
          }

          // .heroes-con {
          //   display: flex;
          //   padding: 4.1667vw 0;
          //   flex-direction: column;

          //   &::before {
          //     position: relative;
          //     content: "";
          //     background-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Features_and_Heroes_Divider-32ff9dae51.svg);
          //     display: flex;
          //     height: 1.5625vw;
          //     background-repeat: no-repeat;
          //     background-position: 50%;
          //     background-size: 90%;
          //     width: 100%;
          //     margin-bottom: 4.1667vw;
          //   }

          //   .tab-wrap {
          //     display: flex;

          //     .left {
          //       max-width: 39.0625vw;
          //       width: 100%;
          //       position: relative;
          //     }

          //     .right {
          //       width: 50%;
          //       position: relative;
          //       margin-left: 4.1667vw;

          //       .heading {
          //         font-style: normal;
          //         font-weight: 700;
          //         margin-bottom: 1.5625vw;
          //         font-size: 3.125vw;
          //       }

          //       .heroes-wrap .tab {
          //         margin: 0 -0.8333vw 2.0833vw;

          //         ul {
          //           display: flex;
          //           box-sizing: border-box;
          //           position: relative;

          //           li {
          //             opacity: 1;
          //             background-color: rgba(255, 255, 255, .3);

          //             &::before {
          //               content: "";
          //               position: absolute;
          //               border: .1042vw solid hsla(0, 0%, 100%, 1);
          //               border-radius: 50%;
          //               top: 0;
          //               left: 0;
          //               bottom: 0;
          //               right: 0;
          //               width: 100%;
          //               height: 100%;
          //             }

          //           }
          //         }
          //       }
          //     }
          //   }
          // }

        }
      }


      // 第六部分  地图部分
      .maps {
        overflow: hidden;
        color: #fff;
        // background-color: #6e93c1;
        -webkit-mask-box-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Solid_Divider-66d5db5c53.svg);
        mask-border: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Solid_Divider-66d5db5c53.svg);
        -webkit-mask-box-image-slice: 16 200 fill;
        mask-border-slice: 16 200 fill;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        margin-top: -9.6354vw;

        .wzhbg {
          width: 100vw;
          height: 59.7396vw;
          border: .0521vw solid black;
          position: relative;
          background-size: contain;
          background-repeat: no-repeat;
          /* background: url()no-repeat; */

        }

        /* 毛玻璃 */
        .wzhbg .maopoli {
          width: 100%;
          height: 100%;
          position: relative;
          backdrop-filter: blur(15px);
          text-align: center;
          padding-top: 2.6042vw;
        }

        .wzhbg .maopoli h2 {
          font-weight: 700;
          font-style: normal;
          font-size: 3.125vw;
          color: #fff;
          font-family: microsoft yahei, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
        }

        .wzhbg .maopoli .wzhtxt {
          /* position: relative; */
          max-width: 37.5vw;
          text-align: center;
          margin: 0 auto;
          font-size: 1.0417vw;
          line-height: 1.4583vw;
          color: #fff;

        }

        .wzhbg .wzhsmimg {
          position: absolute;
          top: 58%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 50vw;
          height: 33.5938vw;
          /* border: 1px solid black; */

        }

        .wzhbg .wzhsmimg .imgbox {
          width: 100%;
          height: 100%;
          overflow: hidden;

        }

        /* 边框 */
        .wzhbg .wzhsmimg .imgbox::after {
          content: "";
          position: absolute;
          /* border: 2px solid hsla(0, 0%, 100%, .2); */
          border-radius: 4px;
          pointer-events: none;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }

        /* 整个图片存放的div */
        .wzhbg .wzhsmimg .imgbox .bigboxpic {
          display: flex;
          width: 400vw;
          height: 100%;
          transition: all .5s;
          flex-wrap: wrap;
        }

        .wzhbg .wzhsmimg .imgbox .bigboxpic .txtboxlu {
          display: flex;
          justify-content: space-evenly;
          width: 400vw;
          height: 5.4688vw;
        }

        .wzhbg .wzhsmimg .imgbox .bigboxpic .txtboxlu .txtnottm {
          text-align: center;
          width: 50vw;
        }

        .wzhbg .wzhsmimg .imgbox .bigboxpic .txtboxlu .txtnottm h2 {
          font-size: 1.875vw;
          font-weight: 700;
          font-style: normal;
          color: #fff;
        }

        .wzhbg .wzhsmimg .imgbox .bigboxpic .txtboxlu .txtnottm span {
          margin-top: .5208vw;
          font-size: 1.0417vw;
          line-height: 1.4583vw;
          color: #fff;
        }

        .wzhbg .wzhsmimg .imgbox .bigboxpic img {
          width: 50vw;
          height: 28.125vw;
        }

        /* 下一张样式 */
        .wzhbg .wzhsmimg .picnext {
          position: absolute;
          top: 50%;
          right: -10%;
          width: 2.6042vw;
          height: 2.6042vw;
          border-radius: 50%;
          text-align: center;
          line-height: 2.6042vw;
          color: aliceblue;
          border: 1px solid rgb(121, 121, 121);
          font-size: 1.0417vw;
          background-color: rgba(255, 255, 255, .3);
        }

        /* 上一张样式 */
        .wzhbg .wzhsmimg .picprev {
          position: absolute;
          top: 50%;
          left: -10%;
          width: 2.6042vw;
          height: 2.6042vw;
          border-radius: 50%;
          text-align: center;
          line-height: 2.6042vw;
          color: aliceblue;
          border: 1px solid rgb(121, 121, 121);
          font-size: 1.0417vw;
          background-color: rgba(255, 255, 255, .3);

        }

        /* 顶部点击按钮 */
        .wzhbg .wzhsmimg ul {
          position: absolute;
          top: -5.2083vw;
          display: flex;
          justify-content: space-evenly;
          width: 50vw;
          height: 4.9479vw;
          color: aliceblue;
          /* border: 1px solid rgb(121, 121, 121); */
          font-size: 1.0417vw;

        }

        .wzhbg .wzhsmimg ul li {
          text-align: center;
        }

        .wzhbg .wzhsmimg ul li p {
          font-weight: 700;
        }

        .wzhbg .wzhsmimg ul li>div {
          position: relative;
          width: 3.3854vw;
          height: 3.3854vw;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 0 .2604vw;
          border-radius: 50%;

        }

        .wzhbg .wzhsmimg ul li>div:active {
          background-color: rgba(255, 255, 255, .3);
        }

        .wzhbg .wzhsmimg ul li>div::before {
          content: "";
          position: absolute;
          border: 2px solid hsla(0, 0%, 100%, 1);
          border-radius: 50%;
          top: 1;
          left: 0;
          bottom: 0;
          right: 0;
          width: 100%;
          height: 100%;
        }
      }



      // 第七部分  背景图部分
      .pve-background {
        position: relative;
        width: 100%;
        height: 100%;
        max-width: 135.4167vw;

        .pve {
          background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/2600_Silver_Background.jpg) no-repeat 50% 0;
          -webkit-mask-box-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Inverse_Top_and_Bottom_Divider-57c3fb4a1a.svg);
          -webkit-mask-box-image-slice: 20 350 fill;
          margin-top: -6.9896vw;
          margin-bottom: -0.9896vw;
          align-items: flex-start;
          z-index: 1;

          .content {
            max-width: 72.9167vw;
            width: 100%;
            margin: 0 auto;

            .header {
              max-width: 37.5vw;
              width: 100%;
              margin-bottom: 2.0833vw;

              .subheading {
                color: rgba(29, 37, 58, .7);
                font-size: 1.0417vw;
                margin-bottom: .2083vw;
                font-weight: 700;
              }

              .heading {
                color: #1d253a;
                font-size: 3.125vw;
                font-weight: 700;
                margin-top: 0;
                font-style: normal;
              }

              .description {
                margin-top: 1.25vw;
                font-size: 1.0417vw;
                color: rgba(29, 37, 58, .9);
              }
            }
          }
        }

        .image-genji {
          background-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/genji.png);
          background-size: auto 100%;
          background-position: bottom left;
          background-repeat: no-repeat;
          z-index: 2;
          height: 110%;
          width: 100%;
          left: 60vw;
          top: 3.3333vw;
          position: absolute;
        }
      }

      // 第八部分 监测站部分
      .watchpoint {
        background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/2600_watchpoint.jpg) no-repeat 50% 0/cover;

        .content {
          max-width: 83.3333vw;
          width: 100%;
          display: flex;
          padding: 30px 0;

          .left {
            width: 60%;
          }

          .right {
            width: 40%;

            .header {
              .heading {
                color: #fff;
                font-size: 3.125vw;
                font-weight: 700;
                margin-top: 0;
                font-style: normal;
              }

              .description {
                margin-top: 2.0833vw;
                font-size: 1.0417vw;
                color: #fff;
              }

              .disclaimer {
                color: #fff;
                font-size: .625vw;
                margin: .625vw 0;
              }
            }

            .btn-default {
              margin: 1.25vw 0;
              padding: 0 2.0833vw;
              font-size: 1.25vw;
              height: 3.75vw;
              line-height: 3.75vw;
              background: #fff;
              position: relative;
              z-index: 1;
              border-radius: .1042vw;
              opacity: .9;
              box-shadow: 0 .1042vw .5208vw rgb(0 0 0 / 10%);
              color: #000;
              font-weight: 700;
              display: inline-flex;
              text-align: center;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }

      // 第九部分 闭幕部分
      .closing-background {
        background-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Desktop_Outro_Sky.jpg);
        min-height: 31.9271vw;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 11;
        margin-top: .0521vw;
        margin-bottom: -1.0417vw;

        &::before {
          content: '';
          background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Desktop_Outro_Characters.png) no-repeat 50% 0/cover;
          width: 100%;
          max-width: 72.9167vw;
          height: calc(100% + 3.125vw);
          display: block;
          position: absolute;
          left: 50%;
          top: -3.125vw;
          transform: translate(-50%);
          z-index: 1;
        }

        .closing {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          max-width: 135.4167vw;
          margin: 0 auto;
          padding: 4.1667vw 2.0833vw;

          .content {
            position: relative;
            max-width: 72.9167vw;
            width: 100%;
            margin: 0 auto;

            .header {
              color: #fff;
              max-width: 37.5vw;
              margin: 0 auto;
              text-align: center;
              padding-top: 10.4167vw;
              z-index: 2;
              width: 100%;
              position: relative;

              .heading {
                line-height: 3.4375vw;
                font-size: 3.125vw;
                margin-bottom: 1.5625vw;
                font-weight: 700;

              }

              .btn-primary {
                display: inline-block;
                background-color: #f06414;
                position: relative;
                z-index: 1;
                padding: 0 2.0833vw;
                opacity: .9;
                height: 3.75vw;
                line-height: 3.75vw;
                border-radius: 2px;
                color: #fff;
                font-weight: 700;

                font-size: 1.25vw;
                text-align: center;
              }

            }
          }
        }

        &::after {
          background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Desktop_Outro_Sky.jpg) no-repeat 50% 0/cover;
          position: relative;
          -webkit-mask-box-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Inverse_Top_Divider-de7b862b6d.svg);
          -webkit-mask-box-image-slice: 20 350 fill;
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          margin-top: -19px;
          width: 100%;
          height: calc(100% + 19px);
          content: "";
          display: block;
          position: absolute;
          left: 0;
          top: 0;
        }

      }



    }

  }

}